/* eslint-disable class-methods-use-this */
import React, { Component } from 'react'
import {
  Modal,
} from 'antd'
import styles from './index.less'

class CreateDiffEditor extends Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.originalModel = null
    this.modifiedModel = null
    this.diffEditor = null
  }

  componentDidMount() {
    this.props.onRef(this)
  }

  // eslint-disable-next-line react/no-unused-class-component-methods
  createDiffEditor(child, data, newData) {
    child.originalModel = window.monaco.editor.createModel(data, 'sql')
    child.modifiedModel = window.monaco.editor.createModel(newData, 'sql')
    child.diffEditor = window.monaco.editor.createDiffEditor(child.eddiff, {
      enableSplitViewResizing: true,
    })
    child.diffEditor.setModel({
      original: child.originalModel, // 服务端版本
      modified: child.modifiedModel, // 本地版本
    })
  }

  render() {
    return (
      <Modal
        visible={this.props.show}
        footer={null}
        onCancel={() => {
          this.props.close(this.diffEditor)
        }}
        title="代码恢复"
        width={1150}
        closable={false}
      >
        <div
          className={styles.create_diff_editor}
        >
          <div className={styles.eddiff_box}>
            {/* <div className={styles.header}>
              代码恢复{' '}
              <i
                onClick={() => {
                  this.props.close(this.diffEditor)
                }}
                className="iconfont icon-cuohao"
              />
            </div> */}
            <div
              ref={(div) => {
                // eslint-disable-next-line react/no-unused-class-component-methods
                this.eddiff = div
              }}
              className={styles.eddiff}
            />
            <div className={styles.buttons}>
              <div>
                <span
                  onClick={() => {
                    this.props.server(
                      this.originalModel.getValue(),
                      this.diffEditor,
                    )
                  }}
                >
                  使用服务器已保存的代码
                </span>
              </div>

              <div>
                <span
                  onClick={() => {
                    this.props.local(
                      this.modifiedModel.getValue(),
                      this.diffEditor,
                    )
                  }}
                >
                  使用本地缓存的代码
                </span>
              </div>
            </div>
          </div>
        </div>
      </Modal>
    )
  }
}

export default CreateDiffEditor
